<template>
  <div class="item">

    <div class="title">
      <div class="tags">
        <!-- <div class="tag" :style="{ 'background': colorInit(data.taskType) }">{{ data.taskType }}</div> -->
        <el-tag :type="tag.type" effect="dark" round>
          {{ tag.taskType }}
        </el-tag>
      </div>
      {{ data.taskMsg }}
    </div>
    <div class="options">
      <el-space direction="vertical" wrap alignment="flex-start">
        <span v-if="data.status === 0">提出人：{{ data.creatorName }}</span>
        <span v-if="data.status === 0">提出时间：{{ convertTime(data.createTime) }}</span>
        <span v-if="data.status === 1 || data.status === 2">处理人：{{ data.processorName }}</span>
        <span v-if="data.status === 1">处理时间：{{ convertTime(data.processTime) }}</span>
        <span v-if="data.status === 2">完成时间：{{ convertTime(data.finishTime) }}</span>
      </el-space>
      <el-dropdown trigger="click" style="font-size: 25px;font-weight: 600;color: gray;float: right;">
        <span>
          ···
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-link type="primary" :icon="Edit" v-permission="['超级管理员', '总经理', '主管']" @click.stop="handleEdit(data)">编辑</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-popconfirm :title="$t('message.common.delTip')" @confirm.stop="handleDel([data])">
                <template #reference>
                  <el-link type="danger" :icon="Delete" v-permission="['超级管理员']">删除</el-link>
                </template>
              </el-popconfirm>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <Layer :layer="layer" @refreshData="refreshData" v-if="layer.show" />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive } from 'vue'
import { taskTypeData, userData } from './enum'
import { Edit, Delete } from '@element-plus/icons'
import { del } from '@/api/taskmanage/work'
import Layer from './layer.vue'
import type { LayerInterface } from '@/components/layer/index.vue'
import { ElMessage } from 'element-plus'
import Permission from '@/directive/permission'
export default defineComponent({
  components: {
    Layer
  },
  directives: {
    Permission
  },
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {
        return {
          taskMsg: '',
          taskType: '',
          creator: '',
          status: ''
        }
      }
    }
  },
  setup(props, context) {
    // 计算属性基本使用
    const convertTime = computed(() => (date: Date) => {
      // 回调函数必须return，结果就是计算的结果
      // 如果计算属性依赖的数据发生变化，那么会重新计算
      if (!date) return ''
      return new Date(date).toLocaleString()
    })
    const tag = reactive({
      type: '',
      taskType: '',
    })
    const taskType = taskTypeData.find(r => r.value === props.data.taskType)
    taskType ? tag.taskType = taskType.label : props.data.taskType
    taskType ? tag.type = taskType.type : ''

    const creator = userData.find(r => r.value === props.data.creator)
    creator && creator.label ? props.data.creatorName = creator.label : props.data.creator
    const processor = userData.find(r => r.value === props.data.processor)
    processor && processor.label ? props.data.processorName = processor.label : props.data.processor

    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
      title: '新增',
      showButton: true
    })

    // 删除功能
    const handleDel = (data: object[]) => {
      let params = {
        ids: data.map((e: any) => {
          return e.id
        })
      }
      // let work = {
      //   id: data.id
      // }
      del(params.ids)
        .then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          context.emit('refreshData', true)
        })
    }
    // 编辑弹窗功能
    const handleEdit = (row: object) => {
      layer.title = '编辑数据'
      layer.row = row
      layer.show = true
    }
    return {
      layer,
      tag,
      userData,
      Edit,
      Delete,
      handleEdit,
      handleDel,
      convertTime
    }
  },
  methods: {
    refreshData() {
      this.$emit('refreshData', true)
    }
  }
})
</script>

<style lang="scss" scoped>
.item {
  background: #fff;
  width: calc(100% - 40px);
  min-height: 50px;
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 10px 15px;
  overflow: hidden;
  white-space: normal;
  cursor: pointer;

  .tags {
    display: inline-block;
    margin-right: 10px;

    .tag {
      color: #fff;
      border-radius: 16px;
      padding: 2px 8px;
      height: 26px;
      line-height: 26px;
      font-weight: 400;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      border: 1px solid transparent;
    }
  }

  .title {
    font-size: 16px;
    margin-right: 8px;
    line-height: 20px;
  }

  .options {
    font-size: 12px;
    color: #999;
    padding-top: 10px;
  }
}
</style>